$(function (){
    initdata();
    //搜索
    BySqlAll();
    //查询全部商品
    $.get(
        "../HtmlProductQuery",
        function (resp) {
           let products=resp.data;
            for (let i = 0; i < products.length; i++) {
                let tr=$(`<tr>
						<td>
							<img src="../${products[i].product.url}" height="20" data-toggle="popover" />
						</td>
						<td>
							<div class="product-title">${products[i].product.name}</div>
						</td>
						<td>${products[i].product.price}</td>
						<td>${products[i].product.stock}</td>
						<td class="d-none d-md-table-cell">
							<span class="badge badge-secondary">${products[i].parentName}</span>
							<span class="badge badge-secondary">${products[i].parentSons}</span>
						</td>
						<td class="dropdown">
							<button class="btn btn-sm btn-outline-primary dropdown-toggle py-0" data-toggle="dropdown">管理</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#modal-show-product" data-toggle="modal" class="dropdown-item xiangqing" data-id="${products[i].product.id}">查看</a>
								<a href="#modal-edit-product" data-toggle="modal" class="dropdown-item update" data-id="${products[i].product.id}">编辑</a>
								<div class="dropdown-divider"></div>
								<a href="" data-toggle="del" class="dropdown-item text-danger deletey" data-id="${products[i].product.id}">移除</a>
							</div>
						</td>
					</tr>`);
                $("#tbody").append(tr);
            }

        },
        "json"
    )
    //查询全部商品结束

    //详情开始
    $("#tbody").on("click","tr > td > div > .xiangqing",function (){
        //拿到当前点击的id
        let id = $(this).data("id");
       $.get(
           "../HtmlProductById",
           {id:id},
           function (msg){
               let product=msg.data;
               //赋值
               $("#img").attr("src","../"+product.product.url);
               $("#ProductName").text(product.product.name);
               $("#price").text(product.product.price);
               $("#stock").text(product.product.stock);
               $("#ParentName").text(product.parentName);
               $("#sonsName").text(product.parentSons);
               $("#xiangqing").text(product.product.detail);
           },
           "json"
       )
    });
    //详情结束

    //修改开始
        $("#tbody").on("click","tr > td > div > .update",function (){
            $("#select-div").text("");
           let id  = $(this).data("id");
            $.get(
                "../HtmlProductAndCategory",
                {id:id},
                function (msg){
                        let product=msg.data.products;
                            //赋值
                           $("#img-update").attr("src","../"+product.url);
                           console.log(product.name);
                           $("#update-name").val(product.name);
                           $("#update-price").val(product.price);
                           $("#update-stock").val(product.stock);
                           $("#update-detail").val(product.detail);
                           $("[name=id]").val(product.id);

                        //分类
                    let parent=msg.data.category;
                    for (let i = 0; i < parent.length; i++) {
                        let parentss=parent[i];
                        let tr=$(` <optgroup label="${parent[i].name}">
                                                                   
                                    </optgroup>`);
                        $("#select-div").append(tr);
                        let son=parentss.sons;
                        console.log(product.categoryid);
                        for (let j = 0; j < son.length; j++) {
                            let trs=$(`
                                <option ${son[j].id==product.categoryid?"selected":""} value="${son[j].id}">${son[j].name}</option>  
                            `);
                            $("#select-div").append(trs);
                        }
                    }
                },
                "json"

            )
            //文件预览
            //点击图片触发文件上传
            $("#img-update").click(function (){
                //只触发点击事件的文件上传
                $("#url-updte").click();
            });
            //文件上传图片赋值
            $("#url-updte").change(function (){
                //得到文件上传把它便变成js对象
                let file= $(this)[0].files[0];
                //把文件上传变成一个路劲
                let imgUrl = URL.createObjectURL(file);
                //赋值
                $("#img-update").prop("src",imgUrl);
            });
            //修改开始
            //点击修改按钮修改数据
            $("#update-btn").click(function (){
                let datas=$("#form-edit-product")[0];
                let formData = new FormData(datas);
                console.log(formData);
                $.ajax({
                    type: "post",
                    url: "../HtmlUpdateProduct",
                    data:formData,
                    processData:false,
                    contentType:false,
                    success:function (msg){
                        alert(msg.data);
                        if (msg.data==1){
                            alert("修数据成功，即将回到html/product.html页面");
                            location.href="product.html";
                        }else {
                            alert("数据有误请重新尝试");
                        }
                    }
                });
                return false;
            })
        });
    //修改结束

    //删除开始
    //详情开始
    $("#tbody").on("click","tr > td > div > .deletey",function (){
        //拿到当前点击的id
        let id = $(this).data("id");
        if (confirm("确定要删除吗")){
            $.get(
                "../HtmlProductDelete",
                {id:id},
                function (msg){
                    if (msg==1){
                        //刷新页面
                        location.reload();
                    }else {
                        alert("数据有误");
                    }
                },
                "json"
            )
        }
    });
    //删除商品结束

    //添加商品开始
    //文件预览
    $("#img-sava").click(function (){
        //只触发点击事件的文件上传
        $("#url-sava").click();
    });
    //文件上传图片赋值
    $("#url-sava").change(function (){
        //得到文件上传把它便变成js对象
        let file= $(this)[0].files[0];
        //把文件上传变成一个路劲
        let imgUrl = URL.createObjectURL(file);
        //赋值
        $("#img-sava").prop("src",imgUrl);
    });

    $("#sava-btn").click(function (){
        let datas=$("#form-add-product")[0];
        let formData = new FormData(datas);
        console.log(formData);
        $.ajax({
            type: "post",
            url: "../HtmlProductSava",
            data:formData,
            processData:false,
            contentType:false,
            success:function (msg){
                alert(msg.data);
                if (msg.data==1){
                    alert("修数据成功，即将回到html/product.html页面");
                    location.href="product.html";
                }else {
                    alert("添加数据有误请重新尝试");
                }
            }
        });
        return false;
    })
});

function pj(elem, data){
    for (let i = 0; i <data.length ; i++) {
        let parent = $(`<optgroup label=${data[i].name}></optgroup>`)
        let son = data[i].sons
        for (let j = 0; j < son.length; j++) {
            let sons = $(`<option value="${son[j].id}">${son[j].name}</option>`)
            parent.append(sons)
        }
        $(`#${elem}`).append(parent)
    }
}
function initdata(){
    $.get(
        "../HtmlCategoryDTO",
        function (msg){
            let category=msg.data;
            pj("div-select",category);
            pj("parenName",category);
        },
        "json"
    )
}

//点击搜索触发点击事件，进行模糊查询
function BySqlAll() {
    $("#ss-btn").click(function () {
        //清空数据展示新查询数据
        $("#tbody").text("");
        $.post(
            "../HtmlProductBySqlName",
            $("#ss-form").serialize(),
            function (msg){
               let products= msg.data;
                for (let i = 0; i < products.length; i++) {
                    let tr=$(`
                            <tr>
						<td>
							<img src="../${products[i].product.url}" height="20" data-toggle="popover" />
						</td>
						<td>
							<div class="product-title">${products[i].product.name}</div>
						</td>
						<td>${products[i].product.price}</td>
						<td>${products[i].product.stock}</td>
						<td class="d-none d-md-table-cell">
							<span class="badge badge-secondary">${products[i].parentName}</span>
							<span class="badge badge-secondary">${products[i].parentSons}</span>
						</td>
						<td class="dropdown">
							<button class="btn btn-sm btn-outline-primary dropdown-toggle py-0" data-toggle="dropdown">管理</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a href="#modal-show-product" data-toggle="modal" class="dropdown-item xiangqing" data-id="${products[i].product.id}">查看</a>
								<a href="#modal-edit-product" data-toggle="modal" class="dropdown-item update" data-id="${products[i].product.id}">编辑</a>
								<div class="dropdown-divider"></div>
								<a href="" data-toggle="del" class="dropdown-item text-danger deletey" data-id="${products[i].product.id}">移除</a>
							</div>
						</td>
					</tr>`);
                    $("#tbody").append(tr);;
                }
            },
            "json"
        )
    });
}